<template>
  <div class="bg">
    <div class="top_nav">
      <span>字体大小设置</span>
      <van-icon
        name="arrow-left"
        size="25"
        class="return_tap"
        color="#fff"
        @click="returnTap"
      />
      <div class="btn">完成</div>
    </div>
 <div class="right_msg">
     <span class="content demo">预览字体大小</span>
     <img src="../../../../static/images/me/headimg.png" alt="" class="headimg">
 </div>
<div class="left_msg">
   
     <img src="../../../../static/images/me/headimg.png" alt="" class="headimg">
      <span class="content bg_fff demo1">拖动下面滑块，可设置字体大小</span>
</div>
<div class="left_msg">
   
     <img src="../../../../static/images/me/headimg.png" alt="" class="headimg">
      <span class="content bg_fff demo1">设置后会改变聊天，菜单和生活圈的字体大小，如果你在使用过程中存在问题或意见，可以反馈给AI团队</span>
</div>
<div class="bottom_box">
    <div class="tip_slider">
        <span>A</span>
         <span class="fonz_30">A</span>
    </div>
    <div class="slider">
        <img src="../../../../static/images/me/pang.png" alt="" class="pang">
        <div> <van-slider v-model="value" @change="onChange" /></div>
       
    </div>
</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
        value:0,
    };
  },
  methods: {
    returnTap() {
      this.$router.go(-1);
    },
    onChange(){

    }
  },
};
</script>
<style  scoped>
.bg {
  min-height: 100vh;
  background: #eeeeee;
}
.top_nav {
  display: flex;
  position: relative;
  justify-content: center;
  align-items: center;
  height: 50px;
  background: #4ac7d7;
  color: #fff;
  
}
.return_tap {
  position: absolute;
  left: 20px;
  top: 15px;
}
.btn {
  position: absolute;
  right: 20px;
  top: 15px;
  width: 50px;
  text-align: center;
  height: 28px;
  line-height: 28px;
  background: #fff;
  color: #000;
  border-radius: 5px;
}
.right_msg{
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    margin: 20px 0;
}
.headimg{
    width: 50px;
    height: 50px;
    margin: 0 10px;
}
.content{
    max-width: 220px;
    background: #96EC68;
    padding: 10px;
    border-radius:5px;  
}
.bg_fff{
    background: #fff;
    
}
.demo1{
   position: relative;  
}

.demo1:after{
    content:"";
  width:0;
  height:0;
  position:absolute;
  left:-8px;
  top:10px;
  border-top:solid 8px transparent;
  border-right:solid 8px white;     /* 白色小三角形 */
  border-bottom:solid 8px transparent;
}
.demo{
    position: relative;
}
.demo:before{
    content:"";
  width:0;
  height:0;
  position:absolute;
  right:-8px;
  top:10px;
  border-top:solid 8px transparent;
  border-left:solid 8px #96EC68;       /* 黑色大三角形 */
  border-bottom:solid 8px transparent;
}
.left_msg{
     display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin: 20px 0;
}
.bottom_box{
    position: fixed;
    width: 100%;
    left: 0;
    bottom: 0;
    background: #fff;
    height: 120px;
}
.tip_slider{
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    height: 50px;
    padding: 0 30px;
}
.fonz_30{
    font-size: 30px;
}
.pang{
    position: absolute;
    top: -5px;
    width: 100%;
    height: 10px;
    z-index: -1;
}
.slider{
    position: relative;
    /* display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center; */
    height: 50px;
   margin: 20px;
}
</style>